<template>
  <div
    class="block"
    :class="states.layout"
    :style="{
      '--columns':
        states.layout === 'grid'
          ? states.columns
          : 100 / (states?.columns ?? 1) + '%',
      '--gap': states.gap + 'px',
    }"
  >
    <div class="item" v-for="item in states.children" :key="item.id">
      <component :is="item.component(item.state)" v-model="item.state.value" />
    </div>
  </div>
</template>

<script setup>
import { computed, watchEffect } from "vue";
const props = defineProps({
  editors: {
    type: Object,
    default: () => ({}),
  },
  children: {
    type: Array,
    default: () => [],
  },
});

const states = computed(() => {
  return {
    layout: props.editors.layout.value?.layoutMode ?? "grid",
    columns: props.editors.layout.value?.columns ?? 1,
    gap: props.editors.layout.value?.gap ?? 5,
    children: props.children,
  };
});
console.log("render");
watchEffect(() => {
  console.log(props.editors);
});
// /^-?\d*\.?\d*$/
</script>

<style scoped>
.block {
  padding: 10px;
  border: 1px solid var(--border-color);
  gap: var(--gap);
  /* row-gap: ;
  column-gap: ; */
}
.block.flex {
  display: flex;
  flex-wrap: wrap;
}
.block.flex > * {
  width: var(--columns);
}
.block.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
}
</style>
